<!-- 只用于试验痕迹管理列表页面 -->

<template>
	<div class="mcTableIndex">
		<div class="mcTableList">
			<el-table
				:data="tableData"
				border
				style="width: 100%"
				ref="table"
				height="calc(100vh - 220px)"
				@selection-change="handleSelectionChange"
				:row-style="{ height: '40px' }"
				:cell-style="{ padding: '0' }"
			>
				<!-- 是否开启选择框 begin -->
				<el-table-column type="selection" width="40" v-if="hasSelect">
				</el-table-column>
				<!-- 是否开启选择框 end -->
				<!-- 字段列展示 begin -->
				<el-table-column label="序号" align="center" width="60" fixed>
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<!-- 列头只有一行，没有合并的情况 -->

				<!-- 列头有合并的情况 -->
				<el-table-column
					:prop="item.prop"
					:label="item.label"
					:width="item.width ? item.width : 'auto'"
					:align="item.align ? item.align : 'center'"
					v-for="(item, index) in tableColumn"
					:key="index"
				>
					<template slot-scope="scope">
						<slot :name="scope.row[item.prop]" :params="scope.row">
							<el-tooltip
								class="item"
								effect="dark"
								:content="
									changeToString(
										item.dictName
											? getDictValue(item.dictName, scope.row[item.prop])
											: scope.row[item.prop]
									)
								"
								placement="top"
							>
								<label
									:style="{
										fontWeight: getCheckValue(
											scope.row,
											item.prop,
											'fontWeight'
										),
										color: getCheckValue(scope.row, item.prop, 'color'),
										textOverflow: 'ellipsis',
										whiteSpace: 'nowrap',
										overflow: 'hidden',
									}"
								>
									{{
										item.dictName
											? getDictValue(item.dictName, scope.row[item.prop])
											: scope.row[item.prop]
									}}
								</label>
							</el-tooltip>
						</slot>
					</template>
				</el-table-column>
				<!-- 字段列展示 end -->

				<!-- 操作按钮集合 begin -->
				<el-table-column
					v-if="tableBtn && tableBtn.length > 0"
					fixed="right"
					label="操作"
					:width="btnListWidth ?? tableBtn.length * 45"
				>
					<template slot-scope="scope">
						<el-button
							v-if="tableBtn.includes('edit')"
							@click.native.prevent="editRow(scope.$index, tableData)"
							type="text"
							size="small"
						>
							编辑
						</el-button>
						<el-button
							v-if="tableBtn.includes('view') && scope.row.optType == 'UPDATE'"
							@click.native.prevent="viewRow(scope.$index, tableData)"
							type="text"
							size="small"
						>
							详情
						</el-button>
						<el-button
							v-if="tableBtn.includes('lookSMJ')"
							@click.native.prevent="lookSMJRow(scope.$index, tableData)"
							type="text"
							size="small"
						>
							查看扫描件
						</el-button>
						<el-button
							v-if="tableBtn.includes('delete')"
							@click.native.prevent="deleteRow(scope.$index, tableData)"
							type="text"
							size="small"
							style="color: red"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
				<!-- 操作按钮集合 end -->
			</el-table>
		</div>
		<div class="mcCommonPager" v-if="tableData && tableData.length > 0">
			<el-pagination
				background
				:layout="
					hasIsSizes
						? 'prev, pager, next,total,sizes'
						: 'prev, pager, next,total'
				"
				:total="count"
				:page-size="size"
				:current-page="current"
				@current-change="pageChange"
				:page-sizes="[20, 100, 500, 1000, 5000]"
				@size-change="handleSizeChange"
			>
				>
			</el-pagination>
		</div>

		<el-dialog
			title="温馨提示"
			:visible.sync="dialogVisible"
			width="30%"
			:before-close="closeDialog"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
		>
			<span style="padding-bottom: 10px; display: block">请输入删除原因：</span>
			<el-input type="textarea" v-model="optReason"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="handleClose"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { PopupCommon } from "@/libs/popupCommon"
	import { Utility } from "@/libs/utility"

	// pageNo 当前第几页
	// pageSize 每页条数

	export default {
		props: {
			/** 数据源：这里不确定字段，只要是数组就可以 */
			dataSource: {
				/** 这里不确定字段，只要是数组就可以 */
				type: Array,
				required: true,
			},
			/** 自定义列 */
			tableColumns: {
				/** 格式： [{prop:"",label:"",width:"",children:[{prop:"",label:"",width:""]}] 其中宽度可以不写，目前只支持列头合并两行的情况，暂未做动态循环配置。 */
				type: Array,
				required: true,
			},
			/** 操作按钮集合 */
			btnList: {
				/** 格式：['edit','view','delete','lookSMJ'] ，可以给空 */
				type: Array,
			},
			btnListWidth: {
				type: String,
				require: false,
			},
			/** 一页显示多少条数据 */
			pageSize: {
				type: Number,
				require: true,
			},
			/** 总共有多少条数据 */
			pageCount: {
				type: Number,
				require,
			},
			/** 当前第几页 */
			pageNo: {
				type: Number,
				require,
			},
			/** 是否开启勾选框 */
			selection: {
				type: Boolean,
			},
			/** 是否展示一页显示多少条数据*/
			isSizes: {
				type: Boolean,
			},
		},
		computed: {
			tableData() {
				return this.dataSource
			},
			tableColumn() {
				return this.tableColumns
			},
			tableBtn() {
				return this.btnList
			},
			size() {
				return this.pageSize
			},
			count() {
				return this.pageCount
			},
			current() {
				return this.pageNo
			},
			hasSelect() {
				return this.selection
			},
			hasIsSizes() {
				return this.isSizes
			},
		},
		data() {
			return {
				multipleSelection: [],
				dialogVisible: false,
				formData: {},
				optReason: "",
			}
		},
		methods: {
			// 将tooltip的值转成string类型，数字类型vue报js错误，虽然实际不影响。
			changeToString(value) {
				if (value) {
					return value.toString()
				} else {
					return ""
				}
			},
			handleSizeChange(e) {
				this.$emit("handleSizeChange", e)
			},
			getCheckValue(row, curColumnName, style) {
				let newValue = ""
				if (style == "fontWeight") {
					newValue = "normal"
				} else {
					newValue = "#606266"
				}
				if (row.autoCheckResult) {
					const autoCheckResult = JSON.parse(row.autoCheckResult)
					if (
						typeof autoCheckResult[curColumnName] != "undefined" &&
						autoCheckResult[curColumnName] == false
					) {
						if (style == "fontWeight") {
							newValue = "bold"
						} else {
							newValue = "red"
						}
					}
				}
				return newValue
			},
			getDictValue(dictType, dictValue) {
				let finishValue = dictValue
				const list = Utility.getDictList(dictType)
				if (
					list &&
					list.length > 0 &&
					typeof dictValue != "undefined" &&
					dictValue != null
				) {
					dictValue = dictValue.toString()
					if (dictValue.indexOf(",") != -1) {
						dictValue = dictValue.split(",")
						finishValue = list
							.filter((t) => dictValue.includes(t.value))
							.map((t) => t.label)
							.join(",")
					} else {
						const item = list.find((t) => t.value == dictValue)
						if (typeof item != "undefined") {
							finishValue = item.label
						}
					}
				}
				return finishValue
			},
			editRow(i, d) {
				const data = {
					index: i,
					data: d[i],
				}
				this.$emit("editRow", data)
			},
			viewRow(i, d) {
				const data = {
					index: i,
					data: d[i],
				}
				this.$emit("viewRow", data)
			},
			lookSMJRow(i, d) {
				const data = {
					index: i,
					data: d[i],
				}
				this.$emit("lookSMJRow", data)
			},
			closeDialog() {
				this.dialogVisible = false
			},
			handleClose() {
				if (this.optReason == "") {
					PopupCommon.notify("info", "请填写删除原因")
					return
				}
				let data = this.formData
				data.optReason = this.optReason
				this.$emit("deleteRow", data)
				this.dialogVisible = false
			},
			deleteRow(i, d) {
				let self = this
				PopupCommon.confirm("此操作将删除该数据, 是否继续?")
					.then(() => {
						self.optReason = ""
						self.dialogVisible = true
						// optReason
						const data = {
							index: i,
							data: d[i],
						}
						self.formData = data
						// this.$emit("deleteRow", data)
					})
					.catch(() => {
						// 这里尽量写下，否则会报警告异常。
						console.log("已取消删除")
					})
			},
			// 页码点击事件,p当前页
			pageChange(p) {
				this.$emit("pageChange", p)
			},
			/** 改变选中行的值 */
			handleSelectionChange(val) {
				this.multipleSelection = val
				this.$emit("handleSelectionChange", val)
			},
		},
		mounted() {},
		destroyed() {
			this.optReason = ""
			this.formData = {}
		},
	}
</script>

<style scoped>
	.mcTableIndex {
		margin-top: 10px;
		height: calc(100vh - 155px);
	}

	.mcTableIndex .mcTableList {
		/* 避免出现滚动条 */
		max-height: calc(100% - 55px);
		overflow: hidden;
	}

	.mcTableIndex .mcCommonPager {
		margin-top: 10px;
		background-color: #fff;
		padding: 5px 0;
	}
</style>
